<template>
  <div class="dialog-container">
    <div class="dialog-content content-1" v-if="showType === 'all'">
      <div class="panel panel-info">
        <div class="panel-content">
          <div class="line-1">
            <div class="user">
              <div class="avatar">
                <i class="el-icon-user-solid"></i>
              </div>
              <div class="text">
                <div class="name ellipsis">{{ companyInfoPeople[0] && companyInfoPeople[0].contact_name }}</div>
                <div class="phone ellipsis">{{ companyInfoPeople[0] && companyInfoPeople[0].company_phone }}</div>
              </div>
            </div>
            <div class="label-list">
              <div class="label">
                <div class="title">{{ companyInfo.talk_sts }}级（{{ talkStsList[companyInfo.talk_sts] }}）</div>
                <div class="desc">意向标签</div>
              </div>
              <div class="label">
                <div class="title">AI外呼轮次</div>
                <div class="desc">1轮</div>
              </div>
            </div>
          </div>
          <div class="line-2">
            <div class="label-list">
              <div class="label" v-for="item in companyInfoLabels" :key="item.id">
                <div class="text">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-desc">
        <div class="title">基本资料</div>
        <div class="list">
          <div class="item">
            <div class="label">公司名称</div>
            <div class="value ellipsis" :title="companyInfo.company_name">{{ companyInfo.company_name }}</div>
          </div>
          <div class="item">
            <div class="label">联系人</div>
            <div class="value ellipsis" :title="companyInfo.company_boss">{{ companyInfo.company_boss }}</div>
          </div>
          <div class="item" v-for="item in companyInfoDesc.lx" :key="item.key">
            <div class="label">{{ item.key }}</div>
            <div class="value ellipsis" :title="item.val">{{ item.val || '--' }}</div>
          </div>
        </div>
      </div>
      <div class="panel panel-record">
        <div class="desc">{{ companyInfoRecord.length }}条人工跟踪记录</div>
        <div class="list" v-if="companyInfoRecord.length > 0">
          <div class="item" v-for="item in companyInfoRecord" :key="item.follow_id">
            <div class="avatar">
              <i class="el-icon-user-solid"></i>
            </div>
            <div class="center">
              <div class="line">
                <div class="text-1">{{ item.follow_man }} 【{{ item.label }}级】</div>
                <div class="time">{{ item.follow_time }}</div>
              </div>
              <div class="text-2">{{ item.desc }}</div>
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无数据" :image-size="100"></el-empty>
      </div>
      <div class="bottom">
        <div class="line line2">
          <div class="button" :class="hasPrev ? '' : 'disable'" @click="prev"><i class="el-icon-arrow-left"></i>上一条</div>
          <div class="button" :class="hasNext ? '' : 'disable'" @click="next">下一条<i class="el-icon-arrow-right"></i></div>
        </div>
      </div>
    </div>
    <div class="dialog-content content-2" :class="{ only: showType === 'audio-only' }">
      <div class="audio-box">
        <audio :src="Aiinfo.talk_mp3" controls ref="audio"></audio>
      </div>
      <div class="content-center">
        <template v-if="Aiinfo.content && Aiinfo.content.length > 0">
          <div class="list" v-for="(item, index) in Aiinfo.content" :key="index">
            <div v-if="item.speaker == 'ME'" class="item">
              <div class="avatar">
                <i class="el-icon-user-solid"></i>
              </div>
              <div class="dialog light" @click="play(item)">
                <img :class="item.playing ? 'playing' : ''" v-if="logo" src="@/assets/icons/yuyin.png" class="icon-yuyin" />
                {{ item.content }}
              </div>
            </div>
            <div class="item right" v-else>
              <div class="dialog">
                {{ item.content }}
              </div>
              <div class="avatar">
                <img v-if="logo" :src="logo" class="img-logo" />
              </div>
            </div>
          </div>
        </template>
        <el-empty v-else description="暂无数据" :image-size="150"></el-empty>
      </div>
      <div class="bottom">
        <div class="line line1">
          <div class="list">
            <div class="item" :class="level === key ? 'active' : ''" @click="handleChangeRalkSts(key)" v-for="(item, key) in talkStsList" :key="item">{{ key }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/img/logo.png'
import { apiChangeRecordLevel, apiNextOrLast } from '@/api/outboundCall'
import {
  companyInfoDescApi, //详情接口
  company_people, //公司详情联系人详情
  company_follow_record, //人工跟踪记录
  company_labels, //标签选择数据回显
} from '@/api/customer'
export default {
  name: 'record',
  props: {
    info: {
      type: Object,
      default: () => {
        return {}
      },
    },
    filter: {
      type: Object,
      default: () => {
        return {}
      },
    },
    index: {
      type: Number,
      default: 0,
    },
    total: {
      type: Number,
      default: 0,
    },
    showType: {
      type: String,
      default: 'all',
    },
    audioInfo: Object,
  },
  data() {
    return {
      Aiinfo: {},
      logo: logo,
      hasPrev: true,
      hasNext: true,
      id: '',
      level: '',
      timer: null,
      companyInfo: {},
      companyInfoDesc: {},
      companyInfoPeople: {},
      companyInfoRecord: {},
      companyInfoLabels: {},
      talkStsList: {
        A: '确认发布',
        B: '准备发布',
        C: '有明确意向',
        D: '有意向',
        E: '意向模糊',
        F: '没有意向',
      },
      audioLength: 0,
    }
  },
  created() {},
  mounted() {
    if (this.showType === 'all') {
      this.id = this.info.id
      this.level = this.info.talk_sts
      this.getNextOrLast()
      this.checkHasNextOrPrev()
    } else {
      this.Aiinfo = {
        talk_mp3: this.audioInfo.ai_mp3,
        content: this.audioInfo.ai_content,
      }
    }
  },
  methods: {
    // 修改意向等级
    handleChangeRalkSts(sts) {
      let info = {
        id: this.id,
        level: sts,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiChangeRecordLevel(formData).then((res) => {
        if (res.code === 200) {
          this.$message.success('操作成功！')
          this.$emit('changeLevel', { id: this.id, sts })
          this.level = sts
        }
      })
    },
    // 上一页
    prev() {
      if (!this.hasPrev) {
        return
      }
      this.$emit('positionChange', -1)
      this.$nextTick(() => {
        this.checkHasNextOrPrev()
        this.getNextOrLast()
      })
      // 表格高亮
    },
    // 下一页
    next() {
      if (!this.hasNext) {
        return
      }
      this.$emit('positionChange', 1)
      this.$nextTick(() => {
        this.checkHasNextOrPrev()
        this.getNextOrLast()
      })
    },
    checkHasNextOrPrev() {
      if (this.filter.pageNumber === 1 && this.index === 0) {
        this.hasPrev = false
      } else {
        this.hasPrev = true
      }
      if ((this.filter.pageNumber - 1) * this.filter.pageSize + this.index + 1 === this.total) {
        this.hasNext = false
      } else {
        this.hasNext = true
      }
    },
    // 下一页或上一页的数据
    getNextOrLast() {
      const info = Object.assign(this.filter, { position: this.index })
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiNextOrLast(formData).then((res) => {
        const { id, talk_sts, company_id } = res.data
        res.data.content.forEach((item) => {
          item.playing = false
        })
        this.Aiinfo = res.data
        this.id = id
        this.level = talk_sts
        this.companyInfo = res.data
        const audio = this.$refs.audio
        audio.addEventListener('loadedmetadata', () => {
          this.audioLength = audio.duration
        })

        companyInfoDescApi({ id: company_id }).then((res) => {
          this.companyInfoDesc = res.data
        })
        company_people({ id: company_id }).then((res) => {
          this.companyInfoPeople = res.data
        })
        company_follow_record({ id: company_id }).then((res) => {
          this.companyInfoRecord = res.data
        })
        company_labels({ id: company_id }).then((res) => {
          this.companyInfoLabels = res.data
        })
      })
    },
    // 播放音频片段
    play(item) {
      const audio = this.$refs.audio
      audio.currentTime = item.startTime / 1000
      audio.play()
      clearTimeout(this.timer)
      this.timer = null
      this.Aiinfo.content.forEach((item) => {
        item.playing = false
      })
      item.playing = true
      this.timer = setTimeout(() => {
        item.playing = false
        audio.pause()
        audio.currentTime = 0
      }, item.endTime - item.startTime)
    },
  },
}
</script>

<style scoped lang="scss">
.dialog-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background: rgb(243, 244, 245);
  box-shadow: inset 0px 0px 16px 0px #e0e0e0;
}
.content-1 {
  width: 55%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  .avatar {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background: rgb(217, 236, 255);
    border-radius: 50%;
    color: #409eff;
    font-size: 18px;
    margin-right: 10px;
  }

  .panel {
    width: 100%;
    padding: 10px;
    background: #ffffff;
    margin-bottom: 10px;
  }
  .panel-info {
    padding: 10px;
    .panel-content {
      .line-1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        .user {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;

          .text {
            .name {
              font-size: 14px;
              color: rgba(0, 0, 0, 0.85);
              margin-bottom: 5px;
            }
            .phone {
              font-size: 12px;
              color: rgba(0, 0, 0, 0.65);
            }
          }
        }
        .label-list {
          display: flex;
          .label {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 5px;
            margin-right: 10px;
            &:last-child {
              margin-right: 0;
            }
            .title {
              padding: 5px 0 3px;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.85);
              text-align: center;
              margin-bottom: 8px;
            }
            .desc {
              font-size: 12px;
              color: rgba(0, 0, 0, 0.45);
            }
          }
        }
      }
      .line-2 {
        .label-list {
          display: flex;
          flex-wrap: wrap;
          .label {
            padding: 0 10px;
            line-height: 30px;
            font-size: 12px;
            line-height: 22px;
            color: #409eff;
            border-radius: 4px;
            border: 1px solid #d9ecff;
            margin-right: 4px;
            margin-top: 6px;
          }
        }
      }
    }
  }
  .panel-desc {
    .title {
      height: 50px;
      padding: 0;
      line-height: 50px;
      font-size: 14px;
      color: #409eff;
      font-weight: bold;
      border-bottom: 1px solid #e0e0e0;
    }
    .list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      padding-top: 10px;
      .item {
        width: 50%;
        height: 40px;
        padding-right: 10px;
        display: flex;
        align-items: center;
        .label {
          flex-shrink: 0;
          width: 40%;
          color: rgba(0, 0, 0, 0.45);
        }
        .value {
          flex-shrink: 0;
          width: 60%;
          color: rgba(0, 0, 0, 0.85);
        }
      }
    }
  }
  .panel-record {
    flex: 1 1 auto;
    overflow-y: auto;
    .desc {
      color: rgba(0, 0, 0, 0.45);
      height: 30px;
      line-height: 30px;
      margin-bottom: 10px;
    }
    .list {
      .item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 10px;
        background-color: #f7f7f7;
        border-radius: 3px;
        border: 1px solid #409eff;
        padding: 16px 10px;
        .center {
          flex-grow: 1;
          .line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 22px;
            margin-bottom: 14px;
            .time {
              color: rgba(0, 0, 0, 0.45);
            }
          }
          .text-2 {
            margin-bottom: 4px;
          }
        }
      }
    }
  }
}
.content-2 {
  width: 44%;
  background: #ffffff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-top: 1px solid #e0e0e0;
  padding-top: 10px;
  &.only {
    width: 100%;
    .bottom .list {
      display: none;
    }
  }

  .audio-box {
    width: 100%;
    padding: 0 24px;
    flex-shrink: 0;
    audio {
      width: 100%;
    }
  }
  .content-center {
    width: 100%;
    flex: 1 1 auto;
    padding: 24px;
    overflow-y: auto;
    .list {
      width: 100%;
      margin-bottom: 10px;
      .item {
        width: 100%;
        line-height: 1.7em;
        display: flex;
        justify-content: flex-start;
        padding: 0;
        padding-right: 34px;
        &.right {
          justify-content: flex-end;
          padding: 0;
          padding-left: 34px;
        }
        .avatar {
          flex-shrink: 0;
          background: #ccc;
          color: #ffffff;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          .img-logo {
            width: 18px;
          }
        }
        .dialog {
          position: relative;
          font-size: 14px;
          margin: 0 8px;
          padding: 6px 16px;
          border-radius: 4px;
          background-color: rgb(240, 242, 245);
          &:after {
            content: '';
            position: absolute;
            left: auto;
            right: -12px;
            top: 10px;
            border: 6px solid transparent;
            border-left-color: rgb(240, 242, 245);
          }
          &.light {
            cursor: pointer;
            background: rgb(217, 236, 255);
            &:after {
              content: '';
              position: absolute;
              left: -12px;
              right: auto;
              top: 10px;
              border: 6px solid transparent;
              border-right-color: rgb(217, 236, 255);
            }
          }
          .icon-yuyin {
            width: 20px;
            position: relative;
            top: 4px;
            &.playing {
              animation: flash 1s infinite;
            }
            @keyframes flash {
              from {
                opacity: 1;
              }
              50% {
                opacity: 0;
              }
              to {
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }
}
.bottom {
  width: 100%;
  box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.15);
  padding: 24px 32px;
  background: #ffffff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 14px;
  .line1 {
    display: flex;
    justify-content: flex-end;
    .list {
      display: flex;
      border: 1px solid #ddd;
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 25px;
        padding: 0 12px;
        border-right: 1px solid #ddd;
        cursor: pointer;
        &:last-child {
          border-right: none;
        }
        &.active {
          background: #409eff;
          color: #fff;
          position: relative;
          &::after {
            content: '';
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            top: -9px;
            left: 14px;
            border: 3px solid transparent;
            border-top-width: 5px;
            border-top-color: #0364ff;
          }
        }
        &:hover {
          background: #e6a23c;
          color: #fff;
        }
      }
    }
  }
  .line2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .button {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.disable {
  color: #ccc;
}
</style>
